<!DOCTYPE html>
<html lang="en">
<head>
    <title>东风日产×NBA "未来之星"</title>
    <link rel="import" href="../common/head.html?__inline">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="/node_modules/swiper/dist/css/swiper.css">
    <link rel="stylesheet" href="/node_modules/video.js/dist/video-js.css">
    <link rel="stylesheet" href="index.less">
    <script src="/node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <!--加载导航栏-->
    <link rel="import" href="../common/header-pc.html?__inline">
    <!--加载导航栏-->

    <!--首图-->
    <div class="big-img">
        <img src="./img/bigimg.jpg">
    </div>

    <!--主体内容-->
    <div class="main-cont">
        <div class="title-img title-img-1">
            <img src="./img/title-img-1.png" alt="">
        </div>

        <div class="swiper-container plan-container content">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/silde-1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/silde-2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/silde-3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/silde-4.png" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination plan-pagination"></div>
        </div>

        <div class="title-img title-img-2">
            <img src="./img/title-img-2.png" alt="">
        </div>

        <div class="explain-choice">
            <a class="btn box-explain-open" data-type="1" data-tit="海选规则说明"><img src="./img/see-choice-rule.png" alt=""></a>
        </div>

        <div class="video-box cimg">
            <div class="video-black" onclick="_smq.push(['custom','18-chinanba-pc','play_1']);">
                <video id="video" class="video-js vjs-default-skin"
                       controls x-webkit-airplay="true" webkit-playsinline="true" playsinline>
                    <source src="../../video/video1.mp4" type='video/mp4' />
                </video>
            </div>
        </div>

        <div class="video-text content">
            <img src="./img/video-text-img.png" alt="">
        </div>

        <a class="to-sign-btn to-href" data-href="sign-up" onclick="_smq.push(['custom','18-chinanba-pc','signUp_1']);"></a>

        <div class="explain-game">
            <a class="btn box-explain-open" data-type="2" data-tit="晋级赛赛制说明"><img src="./img/see-game-rule.png" alt=""></a>
        </div>

        <div class="five-scenes">
            <ul class="ul">
                <li class="li">
                    <img class="animated fadeInUp" style="display: block;" src="./img/five-scenes-1.png" alt="">
                </li>
                <li class="li">
                    <img class="animated fadeInUp" src="./img/five-scenes-2.png" alt="">
                </li>
                <li class="li">
                    <img class="animated fadeInUp" src="./img/five-scenes-3.png" alt="">
                </li>
                <li class="li">
                    <img class="animated fadeInUp" src="./img/five-scenes-4.png" alt="">
                </li>
                <li class="li">
                    <img class="animated fadeInUp" src="./img/five-scenes-5.png" alt="">
                </li>
                <li class="more">
                    <a href="list.html" onclick="_smq.push(['custom','18-chinanba-pc','vote_1']);"></a>
                </li>
            </ul>
        </div>

        <div class="explain-finals">
            <a class="btn box-explain-open" data-type="3" data-tit="总决赛赛制说明"><img src="./img/see-finals-rule.png" alt=""></a>
        </div>

        <div class="finals-explain-img"></div>

        <div class="title-img title-img-3">
            <img src="./img/title-img-3.png" alt="">
        </div>

        <!--vue内容-->
        <div id="vue" v-cloak>
            <div class="new-xiu">
                <div class="img-box content">
                    <div class="img" v-if="players" :class="{true : index==player_index}" @mouseover="new_xiu_over(index)" v-for="(item,index) in players" :style="{'background-image' : 'url('+common().hosturl()+item.headimgurl+')'}">
                        <div class="before"></div>
                        <div class="after" @click="player_video(index)"></div>
                        <div class="arrow animated fadeInUp">
                            <div class="name">{{ item.realname }}</div>
                            <div class="text">{{ item.declaration?item.declaration:'--' }}</div>
                            <a class="a" :href="'detail.html?id='+item.player_no" target="_blank"></a>
                        </div>
                    </div>
                </div>
                <a class="btn box-explain-open" data-type="4" data-tit="视频拍摄说明"></a>
            </div>

            <!--视频弹出框-->
            <div class="video-play-box disNone">
                <video controls x-webkit-airplay="true" webkit-playsinline="true" playsinline v-for="item in players">
                    <source :src="common().hosturl()+item.videourl" type='video/mp4' />
                </video>
            </div>

            <div class="report-box disNone">
                <div class="title-img title-img-4">
                    <img src="./img/title-img-4.png" alt="">
                </div>
                <div class="swiper-container report-container content">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="info">
                                <div class="tit">广州站顺利结束XX荣获冠军</div>
                                <div class="text"> 一直以来，安东尼都希望能够与詹姆斯搭档。甜瓜是一个可以打无球......</div>
                                <ul class="articles">
                                   <li><a href="">广州站顺利结束XX荣获冠军顺利结束XX</a></li>
                                   <li><a href="">广州站顺利结束XX荣获冠军顺利结束XX</a></li>
                                   <li><a href="">广州站顺利结束XX荣获冠军顺利结束XX</a></li>
                                   <li><a href="">广州站顺利结束XX荣获冠军顺利结束XX</a></li>
                                </ul>
                                <!--<a class="btn" href="">活动详情</a>-->
                            </div>
                            <div class="pic-box">
                                <div class="pic"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination report-pagination"></div>
                </div>
            </div>

            <div class="title-img title-img-5 disNone">
                <img src="./img/title-img-5.png" alt="">
            </div>

            <div class="rank-box content disNone" v-if="lists">
                <div class="first">
                    <div class="pic-box">
                        <a class="pic" :style="{'background-image' : 'url('+common().hosturl()+first.headimgurl+')'}" :href="'detail.html?id='+first.player_no">
                            <!--<div class="rank-like">{{ first.votetotal }}</div>-->
                        </a>
                    </div>
                    <div class="info">
                        <div class="tit"><img src="img/rank-first-title.png" alt=""></div>
                        <div class="name">{{ first.realname }}</div>
                        <div class="text">
                            绰号：{{ first.nickname?first.nickname:'--' }}<br>
                            位置：{{ first.position }}<br>
                            编号：{{ first.player_no }}<br>
                            个人宣言：{{ first.declaration?first.declaration:'--' }}
                        </div>
                    </div>
                </div>
                <div class="ul">
                    <a class="li" v-for="(item, index) in lists" v-if="!index==0" :href="'detail.html?id='+item.player_no">
                        <div class="pic" :style="{'background-image' : 'url('+common().hosturl()+item.headimgurl+')'}">
                            <!--<div class="rank-like">{{ item.votetotal }}</div>-->
                            <div class="cover">
                                姓名：{{ item.realname }}<br>
                                绰号：{{ item.nickname }}<br>
                                位置：{{ item.position }}<br>
                                个人宣言：<br>
                                {{ item.declaration }}
                            </div>
                        </div>
                        <div class="text">
                            &nbsp;&nbsp;&nbsp;&nbsp;姓名：{{ item.realname }}<br>
                            选手编号：{{ item.player_no }}
                        </div>
                    </a>
                </div>
                <a href="list.html" class="to-vote"></a>
            </div>
        </div>

    </div>

    <!--侧边栏-->
    <div class="fixed-side">
        <a class="to-href" data-href="sign-up" onclick="_smq.push(['custom','18-chinanba-pc','signUp_2']);"></a>
        <a href="list.html" onclick="_smq.push(['custom','18-chinanba-pc','vote_2']);"></a>
    </div>

    <!--弹出框-->
    <div class="box-explain disNone">
            <div class="tit"></div>
            <div class="cont">
                <img src="./img/box-choice-img.png" alt="">
                <img src="./img/box-game-img.png" alt="">
                <img src="./img/box-finals-img.png" alt="">
                <img src="./img/box-send-img.png" alt="">
            </div>
        <div class="box-close-btn"></div>
    </div>

    <div class="footer"></div>

</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/swiper/dist/js/swiper.js"></script>
<script src="/node_modules/video.js/dist/video.js"></script>
<script src="/web/lib/layer/layer.js"></script>
<script src="/web/js/config.js"></script>
<script src="index.js"></script>
</html>